<template>
    <div class="page-container page-customerManage">
        <!-- <div class="refresh-btn">
            刷新
        </div> -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全部" name="0">
            </el-tab-pane>
            <el-tab-pane label="普通企业" name="1">
            </el-tab-pane>
            <el-tab-pane label="授权企业" name="2">
            </el-tab-pane>
            <el-tab-pane label="已到期" name="3">
            </el-tab-pane>
        </el-tabs>
        <div class="company-manager">
            <div class="operations">
                <div class="operation-btns">
                    <!-- <div :class="{'disabled': multipleSelection.length === 0}">移至成员</div> -->
                    <!-- <div :class="{'disabled': multipleSelection.length === 0}">移至共享</div> -->
                    <div @click="exportToExcel">全部导出</div>
                </div>
                <div class="search-user">
                    <el-input v-model="searchKey" class="search-input" placeholder="企业名称/管理员电话" style="width: 200px;"></el-input>
                    <div class="search-btn" @click="search">查询</div>
                </div>
            </div>
            <el-table
                :data="companyList"
                border
                tooltip-effect="dark"
                style="width: 100%;"

                @selection-change="handleSelectionChange">
                <!-- 多选框 -->
                <!-- <el-table-column
                type="selection"
                width="55">
                </el-table-column> -->
                <el-table-column
                label="编号"
                align="center"
                width="60">
                    <template slot-scope="scope">
                        <div>{{ scope.row.companyId }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="companyName"
                    align="center"
                    label="企业名称"
                    min-width="210">
                </el-table-column>
                <el-table-column
                    prop="allBusinessCardCount"
                    align="center"
                    width="80"
                    label="企业员工">
                </el-table-column>
                <el-table-column
                    prop="currentNum"
                    align="center"
                    width="80"
                    label="总名片数">
                </el-table-column>
                <el-table-column
                    prop="availableNum"
                    align="center"
                    width="100"
                    label="未用名片数">
                </el-table-column>
                <el-table-column
                label="客户人数"
                align="center"
                width="80">
                    <template slot-scope="scope">
                        <div>{{ scope.row.allCustomerCount }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    align="center"
                    label="管理员"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="phone"
                    align="center"
                    width="120"
                    label="管理员电话">
                </el-table-column>
                <el-table-column
                    label="微信号码"
                    align="center"
                    width="120">
                    <template slot-scope="scope">
                        <div>{{ scope.row.personalWx }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="创建时间"
                    align="center"
                    width="140">
                    <template slot-scope="scope">
                        <div>{{ scope.row.createTime | formatDateMin }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="到期时间"
                    align="center"
                    width="140">
                    <template slot-scope="scope">
                        <div>{{ scope.row.endTime | formatDateMin }}</div>
                        <div style="color: #FF5C6C;">{{ scope.row | getStatus }}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="购买版本"
                    align="center"
                    width="100">
                    <template slot-scope="scope">
                        <div>{{ scope.row.companyType == 2 ? "高级版" : scope.row.companyType == 1 ? "普通版" : ""}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="企业类型"
                    align="center"
                    width="100">
                    <template slot-scope="scope">
                        <div v-if="scope.row.isAgent == 1" style="color: #FF5C6C;">代理商</div>
                        <div v-else>
                            <div v-if="scope.row.agentCompanyId && scope.row.agentCompanyId !== ''">
                                单企业
                            </div>
                            <el-popover
                                v-else
                                placement="left"
                                width="240"
                                trigger="hover">
                                <div style="display: flex; justify-content: space-between; align-items: center;"><div>还没有设置代理商ID</div><el-button type="primary" size="mini" @click="addAgentId(scope.row)">去补充</el-button></div>
                                <el-button class="checkCard" slot="reference" type="text" size="medium" style="color: #51cdcb;">单企业</el-button>
                            </el-popover>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    align="center"
                    width="100">
                    <template slot-scope="scope">
                        <div style="text-align: center;">
                            <!-- <el-button class="deleteCard" disabled @click="deleteCard(scope.row.a)" type="text" size="medium">删除</el-button> -->
                            <el-button class="checkCard" @click="checkCard(scope.row.companyId)" type="text" style="color: #51cdcb;" size="medium">详情</el-button>
                            <el-button class="checkCard" @click="setSermissions(scope.row)" type="text" size="medium">设置</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="权限管理" :visible.sync="dialogVisible" class="customer-manage-dialog">
            <el-form
                :model="setSermissionsform"
                label-width="120px"
                inline
                label-position="left">
                <el-form-item label="当前企业">
                    <!-- <el-input v-model="setSermissionsform.companyName" auto-complete="off"></el-input> -->
                    <div>{{setSermissionsform.companyName}}</div>
                </el-form-item>
                <br>
                <el-form-item label="管理员">
                    <!-- <el-input v-model="setSermissionsform.administrator" auto-complete="off"></el-input> -->
                    <div>{{setSermissionsform.administrator}}</div>
                </el-form-item>
                <br>
                <el-form-item label="总购买数">
                    <el-input class="w240" v-model="setSermissionsform.purchaseNum" auto-complete="off"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="支付金额">
                    <el-input class="w240" v-model="setSermissionsform.payNum" auto-complete="off"></el-input>
                </el-form-item>
                <br>
                <el-form-item label="截止日期">
                    <el-date-picker
                        class="w240"
                        v-model="setSermissionsform.time"
                        :picker-options="pickerOptions"
                        type="date"
                        format="yyyy-MM-dd"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <br>
                <el-form-item label="购买版本">
                    <el-radio class="radio" v-model="setSermissionsform.companyType" :label="1">普通版</el-radio>
                    <el-radio class="radio" v-model="setSermissionsform.companyType" :label="2">高级版</el-radio>
                </el-form-item>
                <br>
                <el-form-item label="企业类型">
                    <el-radio class="radio" v-model="setSermissionsform.isAgent" :label="1">代理商</el-radio>
                    <el-radio class="radio" v-model="setSermissionsform.isAgent" :label="0">单企业</el-radio>
                </el-form-item>
                <template v-if="setSermissionsform.isAgent == 1">
                    <br>
                    <el-form-item label="代理价格">
                        <el-input class="w240" v-model="setSermissionsform.agentMoney" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="代理ID">
                        <el-input class="w240" disabled v-model="setSermissionsform.companyId" auto-complete="off"></el-input>
                    </el-form-item>
                </template>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
        <div class="page">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="pageNum"
                :page-sizes="[10]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { selectCompanyListApi, addCompanyServiceApi, updateAgentCompanyIdApi } from '@/api/api.js';
import { str2date, getCookie } from '@/utils/util.js';
import { serverUrl } from "@/utils/server.js";
const Qs = require('qs');
export default {
    data() {
        return {
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            activeName: '0',
            companyList: [],
            total: 0,
            pageNum: 1,
            multipleSelection: [],
            searchKey: '',
            lastSearchKey: '',
            dialogVisible: false,
            setSermissionsform: {
                companyName: '',
                administrator: '',
                companyId: '',
                purchaseNum: '',
                payNum: '',
                isAgent: '',
                companyType: '',
                time: ''
            }
        };
    },
    created() {
        this.getCompanyList();
    },
    mounted() {
        
    },
    methods: {
        getCompanyList () {
            let params = {
                pageNum: this.pageNum,
                companyName: this.searchKey
            }
            if (this.activeName !== '0') {
                params.enterpriseType = this.activeName
            }
            selectCompanyListApi(params).then(res => {
                if (res.code == 200) {
                    this.total = res.data.pageInfo.total;
                    this.companyList = res.data.pageInfo.list;
                    this.lastSearchKey = params.companyName;
                } else {
                    this.companyList = [];
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                this.companyList = [];
            })
        },
        addAgentId(item) {
            console.log(item)
            this.$prompt('请输入代理商ID', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                let params = {
                    companyId: item.companyId,
                    agentCompanyId: value
                }
                updateAgentCompanyIdApi(params).then(res => {
                    if (res.code === 200){
                        this.$message({
                            message: '提交成功，即将刷新页面',
                            type: 'sussess'
                        });
                        setTimeout(() => {
                            this.getCompanyList();
                        }, 200)
                    } else {
                        this.$message({
                            message: res.message,
                            type: 'warning'
                        });
                    }
                }).catch(err => {
                    this.$message({
                        message: err.message,
                        type: 'warning'
                    });
                })
            }).catch(() => {
                
            });
        },
        // 页面切换
        handleClick (tab, event) {
            this.pageNum = 1
            this.searchKey = ''
            this.lastSearchKey = ''
            this.companyList = []
            this.getCompanyList();
        },
        search () {
            this.getCompanyList();
        },
        handleCurrentChange () {
            this.getCompanyList()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        deleteCard (id) {
        },
        checkCard (id) {
            this.$router.push({path: "/companyCardPage", query: {id: id}})
        },
        setSermissions (item) {
            let nowTime = str2date(new Date());
            let endTime = item.endTime ? str2date(item.endTime) : '' ;
            this.setSermissionsform = {
                companyName: item.companyName,
                administrator: item.name,
                companyId: item.companyId,
                purchaseNum: '',
                payNum: '',
                isAgent: item.isAgent,
                companyType: item.companyType,
                agentMoney: item.agentMoney ? (item.agentMoney / 100).toFixed(2) : '',
                time : nowTime > endTime ? nowTime : endTime
            };
            this.dialogVisible = true ;
        },
        confirm () {
            let params = {
                companyId: this.setSermissionsform.companyId,
                purchaseNum: this.setSermissionsform.purchaseNum,
                payNum: (Number(this.setSermissionsform.payNum) * 100).toFixed(0),
                endTime : str2date(this.setSermissionsform.time),
                isAgent: this.setSermissionsform.isAgent,
                companyType: this.setSermissionsform.companyType,
                agentMoney: this.setSermissionsform.isAgent == 1 ? (Number(this.setSermissionsform.agentMoney) * 100).toFixed(0) : ''
            }
            addCompanyServiceApi(params).then(res => {
                if (res.code === 201) {
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                    return ;
                }
                this.dialogVisible = false;
                this.setSermissionsform = {};
                this.getCompanyList();
            })
        },
        // 导出
        exportToExcel () {
            let params = {
                companyName: this.searchKey
            }
            if (this.activeName !== '0') {
                params.enterpriseType = this.activeName
            }
            //  配置请求头
            let headers = new Headers()
            headers.append('token', getCookie('token'))
            headers.append('Content-Type', 'application/x-www-form-urlencoded')
            fetch(serverUrl.baseURL + 'company/selectCompanyListExport', {
                headers: headers,
                method: 'POST',
                body: Qs.stringify(params)
            }).then(res=>{
                return res.blob();
            }).then(res=>{
                let link = document.createElement('a');
                let url = window.URL.createObjectURL(res);
                link.href = url;
                link.download = '企业列表.xls';

                link.click();
                window.URL.revokeObjectURL
            });
        }
    }
}
</script>
<style lang="scss">
.page-customerManage{
    background: #fff;
    min-height: calc(100vh - 150px);
    position: relative;
    .refresh-btn{
        z-index: 999;
        position: absolute;
        top: 20px;
        right: 20px;
        color: #fff;
        height: 32px;
        width: 68px;
        cursor: pointer;
        color: #fff;
        border-radius: 4px;
        text-align: center;
        line-height: 32px;
        background: #51CDCB;
        position: absolute;
    }
    .el-tabs__item{
        height: 74px;
        line-height: 74px;
    }
    .page{
        padding: 10px 0;
        text-align: center;
    }
    .company-manager{
        padding: 0 20px;
        .operations{
            display: flex;
            justify-content: space-between;
            height: 60px;
            align-items: center;
            .operation-btns{
                display: flex;
                div{
                    border-radius: 4px;
                    // background: #B9EBEA;
                    background: #51CDCB;
                    font-size: 14px;
                    line-height: 30px;
                    height: 30px;
                    color: #fff;
                    padding: 0 20px;
                    margin-right: 10px;
                    cursor: pointer;
                }
                .disabled{
                    background: #B9EBEA;
                }
            }
            .search-user{
                display: flex;
                .search-input{
                    height: 30px;
                    margin-right: 10px;
                    .el-input__inner{
                        height: 30px;
                    }
                }
                .search-btn{
                    border-radius: 4px;
                    // background: #B9EBEA;
                    background: #51CDCB;
                    font-size: 14px;
                    line-height: 30px;
                    height: 30px;
                    color: #fff;
                    padding: 0 20px;
                    cursor: pointer;
                }
                .disabled{
                    background: #B9EBEA;
                }
            }
        }
    }
    .customer-manage-dialog{
        .el-dialog{
            width: 450px;
            .el-dialog__header{
                text-align: center;
            }
            .el-form-item{
                margin-bottom: 10px;
            }
            .w240{
                width: 240px;
            }
        }
    }
}
</style>
